<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>


    <script type="text/babel">


        function ChildInput1(props){
            return (
                <input type='text' ref={props.descRef}/>
            )
        }

        
        // function ChildInput2(props,ref){
        //     console.log(props,ref);
        //     return (
        //         <input type='text' ref={ref}/>
        //     )
        // }


        // ERROR : Cannot call a class as a function
        class ChildInput2  extends React.Component{
            render(){
                //console.log(this.props,this.ref);
                return (
                    <input type='text' />
                )
            }
        }


        // 引用转发: 引用地址的转发，自动传递ref的一种技术方案; 支持函数组件
        const RefChildInput2 = React.forwardRef(ChildInput2)
      
        class App extends React.Component{

            constructor(){
                super()
                this.descRef1 = React.createRef() // 000fff111 => {current:null}
                this.descRef2 = React.createRef() // 000fff112 => {current:null}
                this.descRef3 = React.createRef() // 000fff113 => {current:null}
            }
     
           //descRef = React.createRef()  // {current:null}

            handleClick = ()=>{
                //验证 子组件获取到
                console.log(this);

                this.descRef3.current.focus()
            }

            render(){
                return (
                    <div>
                      desc1: <input type='text' name='age'  ref={this.descRef1}/>
                      desc2: < ChildInput1 descRef = {this.descRef2}/>
                      desc3: <RefChildInput2 ref={this.descRef3 }/>
                      <button onClick={this.handleClick}>commit</button>
                    </div>
                )
            }

        }


        // 获取子组件tDOM 引用转发
        // key  ={}
        // key = callback
        // ref={}    =>React.forwardRef=> ref

       

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>